<template>
	<view class="myCaseDel row">
		<van-cell-group>
			<van-cell
				class="bigTitle"
				title="基本信息"
				label-class="title"
				readonly
			/>
			<van-cell required title="姓名" :value="this.$replaceLastStr(dataInfo.name)" />
			<van-cell required title="性别" :value="dataInfo.sex" />
			<van-cell required title="居住城市" title-width="140rpx" :value="dataInfo.address" />
		</van-cell-group>
		<van-cell-group>
			<van-cell
				class="bigTitle"
				title="相关情况"
				label-class="title"
				readonly
			/>
			<van-cell required title="康复疾病" :value="dataInfo.diseaseName" />
			<van-cell required title="康复后是否复发" :value="dataInfo.isRecurs == '1' ? '是' : '否'" />
			<van-field
				class="column textarea"
				label="治疗手段及方法"
				title-width="240rpx"
				clearable
				required
				readonly
			  :value="dataInfo.cureProcess"
			  type="textarea"
				:autosize=" { minHeight: '60px' }"
				maxlength="2000"
			  :border="false"
			/>
			<van-field
				clearable
				readonly
				class="upLoad"
			>
				<template slot="button" class="upLoadOn">
					<view class="upLoadTitle">附件</view>
					<van-uploader :show-upload='false' :deletable="false" :file-list="dataInfo.cureProcessFilesName"></van-uploader>
				</template>
			</van-field>
		</van-cell-group>
		
		<van-cell-group v-if="dataInfo.diseaseDescFilesName.length || dataInfo.medicalHistoryFilesName.length || dataInfo.diseaseDesc || dataInfo.medicalHistory">
			<van-cell
				class="bigTitle"
				title="专业康复检查（附体检报告）"
				label-class="title"
				readonly
			/>
			<template v-if="dataInfo.diseaseDescFilesName.length || dataInfo.diseaseDesc">
				<van-field
					class="column textarea"
					label="康复前后身体情况描述（照片、X光、CT片）"
					title-width="600rpx"
					clearable
					readonly
				  :value="dataInfo.diseaseDesc"
				  type="textarea"
					:autosize=" { minHeight: '60px' }"
					maxlength="2000"
				  :border="false"
				/>
				<van-field
					v-if="dataInfo.diseaseDescFilesName.length"
					clearable
					readonly
					class="upLoad"
				>
					<template slot="button" class="upLoadOn">
						<view class="upLoadTitle">附件</view>
						<van-uploader :show-upload='false' :deletable="false" :file-list="dataInfo.diseaseDescFilesName"></van-uploader>
					</template>
				</van-field>
			</template>
			<template v-if="dataInfo.medicalHistoryFilesName.length || dataInfo.medicalHistory">
				<van-field
					class="column textarea"
					label="以往病史"
					title-width="450rpx"
					clearable
					readonly
					:value="dataInfo.medicalHistory || '暂无数据'"
					type="textarea"
					:autosize=" { minHeight: '60px' }"
					maxlength="2000"
					:border="false"
				/>
				<van-field
					v-if="dataInfo.medicalHistoryFilesName.length"
					clearable
					readonly
					class="upLoad"
				>
					<template slot="button" class="upLoadOn">
						<view class="upLoadTitle">附件</view>
						<van-uploader :show-upload='false' :deletable="false" :file-list="dataInfo.medicalHistoryFilesName"></van-uploader>
					</template>
				</van-field>
			</template>
		</van-cell-group>
		
		<!-- 是否上鉴定会 -->
		<view class="appraising" v-if="isAppraising">
			<text class="title">{{dataInfo.status == 3 ?'已核实，可以上鉴定会' : '已核实，不可以上鉴定会'}}</text>
			<!-- <view class="btn">
				<van-button v-if="dataInfo.status != 3" block round color="rgba(2, 191, 136, 1)" @click="feedClick">补充材料</van-button>
			</view> -->
		</view>
		
		<!-- 是否评论 -->
		<view class="appraising comment" v-if="isComment">
			<text class="title">{{ dataInfo.status == 10 ? `本案例经过鉴定之后于${dataInfo.time}发布` : '已经过鉴定，该案例不发布' }}</text>
			<template v-if="dataInfo.status == 10">
				<view class="remark">
					<view class="praise">
						<text style="color: #333333; font-size: 32rpx; font-weight: bold;">评价<text style="color: #999999; font-size: 28rpx;">({{ total || 0 }})</text> &nbsp;</text>
					</view>
				</view>
				<view v-if="caseCommentList.length" class="bodeStyle" style="max-height: 40vh;height: 39vh;hoverflow-y: scroll;">
					<scroll-view scroll-y="true" 
						style="height: 100%;"
						:enhanced="true"
						:show-scrollbar="false"
						@scrolltolower="loadMore"
					>
						<view class="comment_list comment common" v-for="item in caseCommentList" :key="item.id">
							<view class="list_top">
								<view class="list_top_left">
									<image :src=" item.headPortraitImg || '../../static/tabBar/my.png'" mode=""></image>
									<view class="nick">
										<text class="nickName">{{ item.name || 'zhaomouren' }}</text>
									</view>
								</view>
								
							</view>
							<view class="list_btm">
								<text>{{ item.content }}</text>
							</view>
							<view class="reply">
								<text @click="clickReply(item,false)">查看所有评论</text>
								<view @click="clickReply(item)"><image class="replyImg" src="@/static/share/reply.png" mode=""></image>回复</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view v-else class="noData" style="height: 10vh; padding-top: 100rpx; padding-bottom: 60rpx;">
					<view class="text">暂无评论</view>
				</view>
			</template>
		</view>
		<van-action-sheet 
		:show="replyData.replyShow" 
		title="评论" 
		@click-overlay="replyData.replyShow = false" 
		@close="replyData.replyShow = false">
		  <view style="height: 70vh; padding: 0 20rpx;">
		  	<view class="beComment common">
		  		<view class="list_top">
		  			<view class="list_top_left">
		  				<image :src=" replyData.replyValData.headPortraitImg || '../../static/tabBar/my.png'" mode=""></image>
		  				<view class="nick">
		  					<text class="nickName">{{ replyData.replyValData.name || 'zhaomouren' }}</text>
		  				</view>
		  			</view>
		  		</view>
		  		<view class="list_btm">
		  			<text>{{ replyData.replyValData.content }}</text>
		  		</view>
		  	</view>
		  	<view class="childComment">
		  		<text>全部评论({{ replyTotal || 0 }})</text>
		  		<view class="allComment" v-if="replyData.replyList.length" :style="{'height': isShowReply?'20vh' : '48vh','max-height':'48vh','overflow': 'scroll'}">
		  			<scroll-view 
		  				scroll-y="true" 
		  				@scrolltolower="loadMore1"
		  				style="height: 100%;"
		  			>
		  				<view class="childCommentList common" v-for="item in replyData.replyList" :key="item.id">
		  					<view class="list_top">
		  						<view class="list_top_left">
		  							<image :src=" item.headPortraitImg || '../../static/tabBar/my.png'" mode=""></image>
		  							<text class="nickName">{{ item.name || 'zhaomouren' }}</text>
		  						</view>
		  					</view>
		  					<view class="list_btm">
		  						<text>{{ item.content }}</text>
		  					</view>
		  				</view>
		  			</scroll-view>
		  		</view>
		  		<view v-else class="noData" style="height: 10vh; padding-top: 60rpx">
		  			<view class="text">暂无评论</view>
		  		</view>
		  		<view class="writeCom abso" v-if="replyData.isShowReply">
		  			<view class="writeIpt">
		  			 <input
		  				class="input"
		  				ref="ipt"
		  				type="text"
		  				:placeholder="'回复 '+ replyData.replyValData.name + '：'"
		  				v-model="replyData.replyValue.content" />
		  				<button class="iptBtn" @click="onReplyChange" type="default">发布</button>
		  			</view>
		  		</view>
		  	</view>
		  </view>
		</van-action-sheet>
		<van-toast id='van-toast'/>
	</view>
</template>

<script>
	import { pubGetId, getCaseComment, caseCommentReply, caseCommentAdd } from '@/api/case'
	import { fileById } from '@/api/common'
	import { FormatTime } from '@/utils/index'
	import showImg from '@/components/showBigImg'
	export default {
		name: 'myCaseDel',
		components: { showImg },
		data() {
			return {
				dataInfo: {},
				isAppraising: false, // 是否展示上鉴定会
				isComment: false, // 是否展示评论
				caseCommentList: [], //所有评论列表
				total: 0, //评论条数
				pagination: {
					pageSize: 10,
					pageNum: 1
				},
				dataValue: {
					content: ''
				},
				replyData: {
					isShowReply: true,
					replyShow: false,
					replyValData: {},
					replyList: [],
					replyValue: {
						content: ''
					}
				},
				replyPagination: {
					pageSize: 10,
					pageNum: 1
				},
				replyTotal: '0'
			}
		},
		onLoad(option) {
			this.getData(option.id);
			if (option.isComment) {
				this.isComment = option.isComment;
			}
			if (option.isAppraising) {
				this.isAppraising = option.isAppraising;
			}
		},
		methods: {
			// 查看评论、回复
			clickReply(val,bool=true) {
				this.replyData.isShowReply = bool;
				this.replyData.replyShow = true;
				this.replyData.replyValData = val;
				this.replyPagination.pageNum = 1;
				this.replyData.replyList = []
				this.getCommentComment()
			},
			getData(id) {
				pubGetId({ id: id }).then(res => {
					this.dataInfo = res.data
					let sex = '';
					if (this.dataInfo.gender == 0) {
						sex = '保密'
					} else if (this.dataInfo.gender == 1) {
						sex = '男'
					} else {
						sex = '女'
					}
					this.$set(this.dataInfo,'sex',sex);
					if (this.dataInfo.pubTime) {
						let time = FormatTime(new Date(this.dataInfo.pubTime).getTime(), 'YYYY年MM月DD日');
						this.$set(this.dataInfo, 'time', time)
					}
					if (res.data.cureProcessFiles.length) {
						this.getFile(res.data.cureProcessFiles,'cureProcessFilesName')
					}
					if (res.data.diseaseDescFiles.length) {
						this.getFile(res.data.diseaseDescFiles,'diseaseDescFilesName')
					}
					if (res.data.medicalHistoryFiles.length) {
						this.getFile(res.data.medicalHistoryFiles,'medicalHistoryFilesName')
					}
					if (res.data.situationFiles.length) {
						this.getFile(res.data.situationFiles,'situationFilesName')
					}
					this.getCaseCommentData(res.data.id)
				})
			},
			getCaseCommentData(id,mode) {
				getCaseComment({ caseId: id,...this.pagination,parentId: 0 }).then(res => {
					if (mode == 'more') {
						this.caseCommentList = this.caseCommentList.concat(res.data.rows);
					} else {
						this.caseCommentList = res.data.rows;
					}
					let caseCommentList = this.caseCommentList;
					caseCommentList.map(item => {
						if (item.headPortrait) {
							fileById({ fileId: item.headPortrait }).then(res => {
								this.$set(item,'headPortraitImg', res.data.accessUrl);
							})
						}
					})
					this.total = res.data.total;
				})
			},
			loadMore() {
				console.log(1)
				if ((this.pagination.pageSize * this.pagination.pageNum) >= this.total) {
					return
				}
				this.pagination.pageNum ++;
				this.getCaseCommentData(this.dataInfo.id,'more')
			},
			loadMore1() {
				console.log(1)
				if ((this.replyPagination.pageSize * this.replyPagination.pageNum) >= this.replyTotal) {
					return
				}
				this.replyPagination.pageNum ++;
				this.getCommentComment('more')
			},
			// 所有评论
			getCommentComment(mode) {
				let replayData = this.replyData.replyValData
				getCaseComment({ caseId: replayData.caseId,...this.replyPagination,parentId: replayData.id }).then(res => {
					if (mode == 'more') {
						this.replyData.replyList = this.replyData.replyList.concat(res.data.rows);
					} else {
						this.replyData.replyList = res.data.rows;
					}
					let replyList = this.replyData.replyList;
					replyList.map(item => {
						if (item.headPortrait) {
							fileById({ fileId: item.headPortrait }).then(res => {
								this.$set(item,'headPortraitImg', res.data.accessUrl);
							})
						}
					})
					this.replyTotal = res.data.total;
				})
			},
			onChange() {
				if (!this.dataValue.content) {
					return this.$toast.fail('请输入评论与评价');
				}
				let params = {
					caseId: this.dataInfo.id,
					content: this.dataValue.content
				}
				caseCommentAdd(params).then(res => {
					if (res.status != 1) {
						return this.$toast.fail(res.message);
					}
					uni.showToast({
						title: '新增成功',
						duration: 2000,
						icon: 'success'
					})
					setTimeout(() => {
						this.dataValue.content = '';
					})
					this.getCaseCommentData(this.dataInfo.id);
				})
			},
			// 回复里面提交input值
			onReplyChange() {
				let replyData = this.replyData.replyValData
				if (!this.replyData.replyValue.content) {
					return this.$toast.fail('请输入评论');
				}
				let params = {
					caseId: replyData.caseId,
					content: this.replyData.replyValue.content,
					parentId: replyData.id,
					parentUserId: this.$storage.getItem('userInfo').user.userId,
					parentUserName: this.$storage.getItem('roleDataInfo').name || this.$storage.getItem('userInfo').user.username
				}
				caseCommentReply(params).then(res => {
					if (res.etatus == -2) {
						return this.$toast.fail(res.message);
					}
					uni.showToast({
						title: '新增成功',
						duration: 2000,
						icon: 'success'
					})
					setTimeout(() => {
						this.replyData.replyValue.content = '';
					})
					this.getCommentComment()
				})
			},
			getFile(val,typeName) {
				let arr = [];
				val.map(item => {
				  fileById({ fileId: item }).then(res => {
						if (res.data && res.data.accessUrl) {
							arr.push({url: res.data.accessUrl})
						}
					})
				})
				this.$set(this.dataInfo,typeName, arr);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myCaseDel {
		width: 100%;
		position: relative;
		padding: 0 20rpx 24rpx;
		box-sizing: border-box;
		/deep/ .van-cell__title {
			color: #666666;
		}
		/deep/ .van-cell__value {
			color: #333333;
		}
		.bigTitle {
			/deep/ .van-cell {
				padding-left: 10rpx;
			}
			/deep/ .van-cell__title {
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.textarea {
			/deep/ .van-cell__value {
				margin-top: 20rpx;
				background-color: #F7F8FA;
				border-radius: 16rpx;
				padding: 16rpx;
			}
		}
		.upLoad /deep/ .van-field__input {
			display: none;
		}
		/deep/ .van-field__button {
			padding-left: 0;
		}
		.upLoadOn {
			text-align: left;
			.upLoadTitle {
				color: #666666;
				font-size: 28rpx;
			}
			/deep/ .van-button--normal {
				padding: 90rpx 80rpx;
			}
		}
		.appraising {
			margin-top: 60rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			.title {
				color: #333333;
				font-size: 32rpx;
			}
			.btn {
				width: 100%;
				margin-top: 86rpx;
				font-size: 32rpx;
			}
		}
		.comment {
			margin-top: 20rpx;
			background-color: #FFFFFF;
			.remark {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;
				font-size: 28rpx;
				align-items: center;
				border-bottom: 1rpx solid #f5f5f5;
				
			}
			.comment_list {
				padding: 20rpx;
				font-size: 28rpx;
				position: relative;
				padding-bottom: 0;
				.reply {
					margin-left: 100rpx;
					border-bottom: 1rpx solid #eee;
					padding-bottom: 20rpx;
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: #A9A9A9;
					view {
						display: flex;
						align-items: center;
					}
					.replyImg {
						width: 30rpx;
						height: 30rpx;
						margin-right: 12rpx;
					}
				}
			}
		}
	}
	.common {
		.list_top {
			margin-top: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.list_top_left {
				display: flex;
				image {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}		
				.nick {
					padding-left: 10rpx;
					display: flex;
					flex-direction: column;
				}
			}
		}
		.list_btm {
			padding-left: 100rpx;
			padding-right: 60rpx;
			padding-bottom: 30rpx;
			word-break: break-all;
			word-wrap: break-word;
			text-align: justify;
			color: #666666;
			font-size: 28rpx;
		}
	}
	.writeCom {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-top: 10rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		.writeIpt {
			flex: 3;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx 20rpx;
			.input {
				background: #eee;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 50rpx;
				padding-left: 30rpx;
				margin-right: 30rpx;
				flex: 1;
				font-size: 28rpx;
			}
			.iptBtn {
				width: 120rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				border-radius: 30rpx;
				margin: 0;
				color: #FFFFFF;
				background-color: #02BF88;
				&:active {
					background-color: rgba(2, 191, 136, .6);
				}
			}
		}
		.evaluate {
			display: flex;
			margin-top: 10rpx;
			font-size: 28rpx;
			margin-bottom: 20rpx;
			padding-left: 40rpx;
		}
	}
</style>
